<template>
  <div>
    <div id="BarChart2" />
  </div>
</template>

<script lang="ts">
import { Component } from "vue-property-decorator";
// lib
import * as echarts from "echarts";
// components & widgets
import ResizeChartVm from "@/public/base/ResizeChartVm";
// config
// script & public
// controller & service
// interface
// 其它

@Component
export default class LineChart extends ResizeChartVm {
  mounted() {
    this.initChart();
  }
  initChart() {
    const el = document.getElementById("BarChart2");
    if (!el) {
      this.$message.error("没有图表挂载点");
      return;
    }
    this.chartE = echarts.init(el);
    const options: echarts.EChartsOption = {
      animation: true,
      title: {
        text: "bar",
      },
      tooltip: {
        trigger: "item",
      },
      toolbox: {
        feature: {
          saveAsImage: {},
          dataView: {},
          restore: {
            title: "还原",
          },
          dataZoom: {},
          magicType: {
            type: ["line", "bar"],
          },
        },
      },
      dataZoom: [
        {
          type: "slider",
          yAxisIndex: 0,
        },
        {
          type: "slider",
          xAxisIndex: 0,
        },
      ],
      legend: {
        data: ["一月第一周", "一月第2周"],
      },
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "一月第一周",
          data: [230, 224, 218, 135, 147, 260, 260, 260, 260],
          type: "bar",
        },
        {
          name: "一月第2周",
          data: [200, 204, 208, 235, 147, 260, 260, 260, 260],
          type: "bar",
        },
      ],
    };
    this.chartE.setOption(options);
  }
}
</script>

<style scoped lang="scss">
#BarChart2 {
  width: 50%;
  height: 300px;
}
</style>
